<template>
    <div class="app-container">
        <!-- <h2>{{ formTitle || '加载中...' }}</h2> -->
        <DynamicForm v-if="formFields.length > 0" :formFields="formFields" :name="formTitle" :formId="formId" @submit-success="handleSuccess" />
        <div v-else class="loading">加载表单数据中...</div>
    </div>

</template>


<script>
import { getFormComponent, submitForm, getFormInfo } from '@/api/cd/form'
import DynamicForm from '@/components/cd/form/DynamicForm.vue'

export default {
    components: {
        DynamicForm
    },
    props: ['form_id'], // 通过路由传参传入
    data() {
        return {
            formFields: [
            ],
            queryParams: {
                id: 0
            },
            formTitle: '',
            formId: 0
        }
    },
    created() {
        this.formId = this.form_id;
        this.queryParams.id = this.form_id;
        this.loadForm();
        
    },
    methods: {
        // 加载初始数据
        loadForm() {
            getFormComponent(this.queryParams.id).then(response => {
                this.formFields = response.data
            });
            try {
                getFormInfo(this.form_id).then(response => {
                    if (response.code === 200) {
                        this.formTitle = response.data.name
                    }

                });
            } catch (err) {
                this.formTitle = '网络错误'
                console.error('请求失败:', err)
            }

        },
        handleSuccess(response) {
            // 处理表单提交成功后的逻辑
            if (response.code === 200) {
                alert('提交成功');
                // 可以在此处执行其他操作，如跳转页面、重置表单等
            } else {
                alert('提交失败，请稍后再试');
            }
        }
    }
}
</script>